<script setup lang="ts">
import MyTabbar from '../components/my-tabbar/index.vue'
const _listMain = [
    {
        name: '就诊人',
        icon: ''
    },
    {
        name: '影像诊断',
        icon: ''
    },
    {
        name: '检查报告',
        icon: ''
    },
    {
        name: '服务记录',
        icon: ''
    },
]
const _listOther = [
    {
        name: '实用工具',
        icon: ''
    },
    {
        name: '医院导航',
        icon: ''
    },
    {
        name: '咨询电话',
        icon: ''
    }
]
</script>
<template>
    <view class="mine content">
        <view class="info">
            <up-avatar src="https://uview-plus.jiangruyi.com/h5/static/uview/album/1.jpg" :size="70"></up-avatar>
            <view class="nickname">点击登录</view>
            <view class="menu">
                <view class="btn">
                    <svg-icon name="people" width="35" height="35" />
                    <view class="name">就诊人</view>
                </view>
                <view class="btn">
                    <svg-icon name="image" width="35" height="35" />
                    <view class="name">影像诊断</view>
                </view>
                <view class="btn">
                    <svg-icon name="report" width="35" height="35" />
                    <view class="name">检查报告</view>
                </view>
                <view class="btn">
                    <svg-icon name="list" width="35" height="35" />
                    <view class="name">服务记录</view>
                </view>
            </view>
        </view>
        <view class="ads">

        </view>
        <view class="other-menu">
            <up-cell-group>
                <up-cell icon="heart-fill" title="我的收藏" :isLink="true"></up-cell>
                <up-cell icon="grid-fill" title="实用工具" :isLink="true"></up-cell>
                <up-cell icon="integral-fill" title="合作医院" :isLink="true"></up-cell>
                <up-cell icon="info-circle-fill" title="关于我们" :isLink="true"></up-cell>
                <up-cell icon="server-fill" title="咨询投诉" :isLink="true"></up-cell>
            </up-cell-group>
        </view>
        <my-tabbar :index="1" />
    </view>
</template>
<style lang="scss">
.content {
    .info {}
}
</style>
<style lang="scss" scoped>
.mine.content {
    width: 100vw;
    height: 100vh;
    background-color: #e1e1e1;

    .info {
        width: 100vw;
        height: 200px;
        background-color: #0099CC;
        background: linear-gradient(to bottom, #003399, #e1e1e1);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-top: 25px;

        .nickname {
            margin-top: 10px;
            color: #fff;
        }

        .menu {
            width: 95vw;
            height: 90px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -40px;
            margin: auto;
            background-color: #fff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            border-radius: 8px;

            .btn {
                width: 20vw;
                height: 20vw;
                background-color: #fff;
                margin: 0 1vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #333;
            }
        }
    }

    .ads {
        width: 95vw;
        height: 19vw;
        background-image: url('/static/imgs/temp/ads1.jpg');
        background-position: center;
        background-size: 100% 100%;
        margin: 45px auto 0 auto;
    }

    .other-menu{
        width: 95vw;
        margin: 5px auto 0 auto;
        background-color: #fff;
    }

}
</style>